﻿<link href="/content/bootstrap-datetimepicker-0.0.11/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script src="/content/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>

<div style="background-color: #fff; margin: 20px 0px;">
    <div class="row">
        <div class="span7">
            <div style="background: url(/content/images/portal/book_bg.jpg) no-repeat; height: 519px;"></div>
        </div>
        <div class="span5">
            <div style="padding: 150px 0px 0px 0px; text-align: left; font-family: 微软雅黑; font-size: 18px; color: #ccc">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="txtSchoolName" style="font-size: 18px">请输入学校名称</label>
                        <div class="controls">
                            <input type="text" id="txtSchoolName" placeholder="学校名称 ">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="txtClass" style="font-size: 18px">请输入班级名称</label>
                        <div class="controls">
                            <input type="text" id="txtClass" placeholder="班级名称">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="txtRealName" style="font-size: 18px">请输入您的姓名</label>
                        <div class="controls">
                            <input type="text" id="txtRealName" placeholder="真实姓名">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputPassword" style="font-size: 18px">请选择预约时间</label>
                        <div class="controls">
                            <div id="datetimepicker" class="input-append">
                                <input data-format="yyyy-MM-dd" type="text" style="width: 95%" id="txtTime" />
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div style="padding-left: 30px">
                        <button class="btn btn-success" style="width: 85%; padding: 10px 0px; font-size: 18px;" onclick="return mysubmit()">提 交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal hide fade" id="message">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>恭喜您</h3>
    </div>
    <div class="modal-body">
        <p>您的预约已经成功，请按时到体测中心签到！！！</p>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker({
            pickTime: false
        });
    });

    function mysubmit() {
        var values = {
            btime: $("#txtTime").val(),
            schoolName: $("#txtSchoolName").val(),
            className: $("#txtClass").val(),
            studentName: $("#txtRealName").val()
        };

        Whale.Remote.Operation({
            url: "/Temps/TBook/CreateNew",
            parameters: values,
            success: function (result) {
                $("#txtTime").val("");
                $("#txtSchoolName").val("");
                $("#txtClass").val("");
                $("#txtRealName").val("");
                $('#message').modal({ show: true })
            },
            error: function (msg) {
                
            }
        });
        return false;
    }
</script>
